<template>
  <div class="home-container">
    <van-nav-bar fixed>
      <template #left>
        <!-- <img src="@/assets/logo.png" alt="" width="100px" height="30px"> -->
        <div class="logo"></div>
      </template>
      <template #right>
        <div>
          <van-button icon="search" round color="#00adfc">搜索</van-button>
        </div>
      </template>
    </van-nav-bar>

    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in articleList" :key="item.art_id" :title="item.title"
            @click="$router.push({path:'/myArticle',query:{id:item.art_id}})"
            >
              <template #label >
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item v-for="(it,index) in item.cover.images" :key="index">
                      <van-image
                        :src="it"
                          lazy-load
                      />
                    </van-grid-item>
                    
                  </van-grid>
                  <br />
                  <span>{{item.aut_name}}</span>&nbsp;&nbsp; <span>{{item.comm_count}}评论</span>&nbsp;&nbsp;
                  <span>{{item.pubdate | fromNow}}</span>&nbsp;
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {getChannelList,getArticleList} from './home.js'
import * as moment from 'moment';
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      loading: false,
      finished: false,
      list: [],
      isLoading: false,
      channelList:[],
      articleList:[]
    }
  },
  async created(){
    let res=await getChannelList()
    this.channelList=res.data.data.channels
  },
  methods: {
    async onLoad () {
      if(!this.timestamp){
        this.timestamp=Date.now()
      }
      let res=await getArticleList({
        channel_id:this.channelList[this.active].id,
        timestamp:this.timestamp
      });
      console.log(res);
      this.timestamp=res.data.data.pre_timestamp
      this.articleList.push(...res.data.data.results)
     
      
        this.loading = false
        if (this.list.length >= 100) {
          this.finished = true
        }
      
    },
    onRefresh () {
      this.finished = false
      this.isLoading = false
      this.articleList = []
      this.timestamp=null
      this.loading = true
      this.onLoad()
    },
    tabClick () {
      console.log(this.active)
      this.articleList = []
      this.timestamp=null
      this.loading = true
      this.onLoad()
    }
  },
  filters:{
    fromNow(value){
    
      return moment(value).fromNow(); 
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar{
    z-index: 10;
  }
  .logo {
    width: 100px;
    height: 30px;
    background: url('~@/assets/logo.png') no-repeat;
    background-size: 100%;
  }
  .van-nav-bar__right {
    .van-button {
      width: 100px;
      height: 40px;
      .van-icon {
        color: #fff;
      }  
    }
  }
}

.van-tabs__wrap {
  position: fixed;
  top: 46px;
  z-index: 1;
  width: 100%;
}
.van-tabs__content {
  margin-top: 90px;
  margin-bottom: 50px;
}
</style>
